styles: make the layout aware of the header height [beta] - #2688
Open
thomasbuilds wants to merge 3 commits into
Open
styles: make the layout aware of the header height [beta]#2688thomasbuilds wants to merge 3 commits into
thomasbuilds wants to merge 3 commits into
Conversation
thomasbuilds
changed the title
|
Each target carried its own offset, most keyed to a 1200px breakpoint and one to nothing at all, but the header is sticky except under `(width >= 1200px) and (hover: hover)`. None of them matched that, so anchored headings could land under the header instead of below it. Declare the header height and derive one offset from it.
It was set as both a margin and a padding, so every page carried double. The 404 height calc had been tuned around the doubled value, so it is rewritten off the header height and the real spacing.
Out of flow it cleared the header by hand and `.main-content` reserved its space, so the logo sat under the header and off-centre, the text could run into the next section on short viewports, and the section stopped short of filling the screen on phones. Back in flow the layout clears the header and reserves the hero's space on its own; sizing it to the screen below the header does the rest. The fixed inline insets go too, so the hero follows the content column.
Contributor
|
Deploy failed cc @plowsof |
Collaborator
|
thanks @nahuhh , the main url was moved to beta.getmonero.org and coolify gave us a helping hand and set the preview url to that without telling me, fixed now |
Author
|
yes nice we can visually compare my change now between this and beta.getmonero.org quickly |
Contributor
|
The M behind the hero seems to maintain its position between deploy and germonero.org, but deploy is larger |
Author
|
The M now extends to the available height (this also fixes the incorrect vertical centering). Also on mobile the section wasn't taking up the full height before, so you could see the About section underneath which I think looks ugly. I just re-verified this with iPhone XR in chrome DevTools. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Nothing in the layout knows how tall the header is, so every rule that has to clear it carries its own guess. There are ten of them and they disagree with each other and with the header. This fixes the three things that fall out of that, starting with the M behind the hero, which isn't vertically centered.